<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>班级学员列表</title>
    <link href="/assets/images/favicon.ico" rel="icon">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"/>
    <script src="/assets/libs/layui/layui.js"></script>
</head>
<body>
<div style="padding: 20px;">
    <table id="studentTable" lay-filter="studentTable"></table>
    <script type="text/html" id="studentBarTable">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="resetPassword">重置密码</a>
        <a class="layui-btn  layui-btn-xs" lay-event="setMonitor">设为班长</a>
    </script>
</div>
<div style="margin-bottom: 20px;">
    <button id="downloadExcel" class="layui-btn layui-btn-normal">
        <i class="layui-icon layui-icon-download-circle"></i> 导出班级成员
    </button>
</div>


<script th:inline="none">
    layui.use(['table', 'layer'], function () {
        const $ = layui.jquery;
        const table = layui.table;
        const layer = layui.layer;

        // 获取 URL 参数中的班级 ID
        const params = new URLSearchParams(window.location.search);
        const classId = params.get('id');

        console.log("id:"+classId)

        // 渲染学员表格
        table.render({
            elem: '#studentTable',
            url: '/class/' + classId + '/students', // 学员数据接口
            cols: [[
                {field: 'id', title: '学员编号', width: 150},
                {field: 'name', title: '学员名称', width: 200},
                {field: 'department', title: '所属单位', width: 150},
                {field: 'tel', title: '电话号', width: 150},
                {fixed: 'right', title: '操作', toolbar: '#studentBarTable', width: 200}
            ]],
            page: true,
            limit: 20,
            limits: [10, 20, 50]
        });

        // 监听工具条
        table.on('tool(studentTable)', function (obj) {
            const data = obj.data;

            if (obj.event === 'resetPassword') {
                layer.confirm('确认重置密码(123456)吗？', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: '/student/resetPassword', // 重置密码接口
                        data: {id: data.id},
                        dataType: 'json',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg('密码重置成功');
                            } else {
                                layer.msg(res.msg, {icon: 2, anim: 6});
                            }
                            layer.close(index);
                        }
                    });
                });
            }else if (obj.event === 'setMonitor') {
                layer.confirm('确认将此学员设为班长吗？', function (index) {
                    $.ajax({
                        type: 'PUT',
                        url: '/class/update', // 设为班长接口
                        contentType: 'application/json', // 设置请求头为 JSON
                        data: JSON.stringify({
                            id: classId,
                            monitorId: data.id
                        }),
                        dataType: 'json',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg('设置班长成功');
                                parent.layui.table.reload('tableList'); // 刷新主表格
                            } else {
                                layer.msg(res.msg, {icon: 2, anim: 6});
                            }
                        },
                        error: function () {
                            layer.msg('请求失败，请稍后再试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });

        $('#downloadExcel').on('click', function () {
            console.log('点击了导出按钮');

            fetch('/class/' + classId + '/export?' + new URLSearchParams({
                // 如果需要传递额外的参数，可以在这里添加
            }), {
                method: 'GET',
            })
                .then(response => {
                    console.log('响应状态:', response.status);  // 输出状态码
                    console.log('响应头:', response.headers);   // 输出响应头

                    if (!response.ok) {
                        throw new Error('网络响应失败，状态码：' + response.status);
                    }

                    // 返回响应和blob，确保后续可以使用 response
                    return response.blob().then(blob => {
                        return { response, blob };  // 返回一个对象，包含 response 和 blob
                    });
                })
                .then(({ response, blob }) => {
                    // 在这里获取文件名，确保 response 在作用域内
                    const downloadUrl = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = downloadUrl;

                    // 获取文件名（如果后端设置了 Content-Disposition 头）
                    const disposition = response.headers.get('Content-Disposition');
                    console.log('Content-Disposition:', disposition);  // 输出头部内容
                    let filename = '班级名单.xlsx'; // 默认文件名
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        // 试图匹配 filename 参数（支持 URL 编码）
                        const filenameRegex = /filename=([^;]+)/;
                        const matches = filenameRegex.exec(disposition);
                        if (matches && matches[1]) {
                            console.log("获取文件名")
                            filename = decodeURIComponent(matches[1]);
                        }
                    }

                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(downloadUrl); // 释放 URL
                    console.log('文件下载成功');
                    layer.msg('导出成功');
                })
                .catch(error => {
                    console.error('下载失败:', error); // 输出详细的错误信息
                    layer.msg('下载失败，请稍后重试');
                });
        });

    });
</script>
</body>
</html>
